// object-fit: contain;
.upload-msg-container {
  background-color: #d32f39;
  // height: auto;
  .top-area {
    height: 44px;
    width: 100vw;
  }
  .upload-msg-title {
    position: relative;
    width: 100vw;
    height: 82px;
    text-align: center;

    z-index: 100;
    .upload-msg-text {
      margin-top: 12px;
      font-size: 32px;
      color: #ffffff;
      padding-top: 9px;
    }
    &.xuexiao {
      background: url('../../../static/upload/img_biaoti_xiao_huang@3x.png')
        no-repeat center;
      background-size: 318px 82px;
    }
    &.jiating {
      background: url('../../../static/upload/img_biaoti_xiao_zi@3x.png')
        no-repeat center;
      background-size: 318px 82px;
    }
  }
  .upload-msg-area {
    background: #ffffff;
    border-radius: 60px 60px 0 0;
    margin-top: -65px;
    padding: 0 54px;
    padding-top: 100px;
    padding-bottom: 64px;
    .upload-title {
      display: flex;
      height: 55px;
      vertical-align: middle;
      line-height: 55px;
      .title-left {
        width: 48px;
        height: 48px;
        margin-top: 3.5px;
      }
      .title-right {
        width: 154px;
        height: 55px;
        line-height: 55px;
        text-align: center;
        background: #ffffff;
        border: 1px solid rgba(187, 188, 188, 0.41);
        border-radius: 27.5px;
        padding-left: 10px;
        // 文字
        font-size: 24px;
        color: #e93844;
        letter-spacing: 1px;
        &.text-num {
          border: none;
          text-align: right;
          font-size: 26px;
          color: #989898;
          letter-spacing: 0;
        }
        &.change-theme {
          text-align: center;
          display: flex;
          align-self: center;
          .change-theme-icon {
            width: 34px;
            height: 34px;
            margin: 9px 6px 0 20px;
          }
        }
      }
      .title-mid {
        flex: 1;
        font-size: 30px;
        color: #333333;
      }
    }
    // 主题部分
    .theme-area {
      width: 590px;
      height: 439px;
      background: #ffffff;
      border: 1px solid #e3e7eb;
      border-radius: 21.6px;
      margin: 30px auto 60px;
      text-align: center;
      .theme-mian {
        background: #faeff3;
        border-radius: 14.4px;
        width: 540px;
        height: 333px;
        margin-top: 24px;
      }
      .theme-desc {
        font-size: 26px;
        color: #989898;
        line-height: 42px;
        margin-top: 14px;
      }
    }
    // 上传部分
    .upload-area {
      display: flex;
      margin: 39px 0 61px;
      flex-wrap: wrap;
      .upload-item {
        position: relative;
        flex: 1;
        margin-right: calc(33.3% - 200px);
        margin-bottom: 15px;
        &:nth-child(3n) {
          margin-right: 0;
        }
        &:last-child {
          max-width: calc(33.3% - 13px);
        }

        .uploaded-img-area {
          position: relative;
          .uploaded-img {
            width: 200px;
            height: 200px;
            background: #faeff3;
            border-radius: 24px;
            // object-fit: contain;
            object-fit: cover;
          }
          .del-icon {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            right: 3.5px;
          }
        }

        .item-icon {
          width: 200px;
          height: 200px;
          background: url('../../../static/upload/img_shangchuan_tianjia@3x.png')
            no-repeat center;
          background-size: 200px 200px;
          &.error {
            opacity: 0.56;
            background: #000000;
            border-radius: 24px;
            .icon-error-desc {
              font-size: 24px;
              color: #ffffff;
              text-align: center;
              line-height: 200px;
            }
          }
        }
        &:last-child {
          margin-bottom: 0;
          .item-icon {
            width: 200px;
            height: 200px;
            background: url('../../../static/upload/img_shangchuan_cankao@3x.png')
              no-repeat center;
            background-size: 200px 200px;
            &.error {
              opacity: 0.56;
              background: #000000;
              border-radius: 24px;
              .icon-error-desc {
                font-size: 24px;
                color: #ffffff;
                text-align: center;
                line-height: 200px;
              }
            }
          }
        }
        .icon-desc {
          position: absolute;
          top: 118px;
          width: 200px;
          height: 50px;
          border-radius: 0 0 24px 24px;
          // 文字
          font-size: 26px;
          color: #989898;
          letter-spacing: 0;
          text-align: center;
          line-height: 42px;
        }
        .up-input {
          width: 200px;
          height: 200px;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
        }
      }
    }
    // 作品描述
    .upload-desc {
      width: 100%;
      .upload-desc-testarea {
        width: 100%;
        border: none;
        font-size: 30px;
        color: #333333;
        line-height: 42px;
        margin-top: 25px;
        outline: none;
        border: none;
      }
    }
    .upload-btn {
      width: 380px;
      height: 80px;
      line-height: 80px;
      margin: 8px auto 0;
      background-image: linear-gradient(-126deg, #e23e48 0%, #d03c50 100%);
      box-shadow: 0 16px 15px -7px rgba(224, 64, 82, 0.42);
      border-radius: 40px;
      font-size: 30px;
      color: #ffffff;
      letter-spacing: 3px;
      text-align: center;
      &.no-use {
        background-image: linear-gradient(-126deg, #d4d4d4 0%, #b6b6b6 100%);
        box-shadow: 0 16px 15px -7px rgba(171, 171, 171, 0.42);
        border-radius: 40px;
      }
    }
  }
  .confirm-pop-area {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    .pop-icon {
      width: 330px;
      height: 229px;
      text-align: center;
      margin: calc(50vh - 355px) auto 0;
    }
    .pop-main {
      padding: 81px 67px 0;
      width: 546px;
      height: 289px;
      margin: -19px auto 0;
      background: #ffffff;
      border-radius: 32px;
      text-align: left;
      .pop-desc {
        font-size: 28px;
        color: #353535;
        line-height: 50px;
        font-weight: 700;
        min-height: 100px;
      }
      .pop-btns {
        height: 100px;
        line-height: 80px;
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
        .btn-item {
          height: 80px;
          width: 256px;
          text-align: center;
          border: 2px solid #c72c36;
          border-radius: 40px;
          font-size: 30px;
          color: #c72c36;
          letter-spacing: 3px;
          &.confirm {
            background: #c72c36;
            color: #ffffff;
            box-shadow: 0 16px 15px -7px rgba(224, 64, 82, 0.42);
          }
        }
      }
    }
  }
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
}
input:-moz-placeholder,
textarea:-moz-placeholder {
}
input::-moz-placeholder,
textarea::-moz-placeholder {
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
}
